<template>
  <router-link
    v-if="userId"
    class="avatar-container"
    target="_blank"
    :to="{ name: 'patientInfo', query: { id: userId } }"
  >
    <img :src="avatar" class="avatar-container" />
  </router-link>
  <img v-else :src="avatar" class="avatar-container" />
</template>
<script>
  import { computed } from '@vue/runtime-core'
  import { useRoute } from 'vue-router'
  export default {
    name: 'avatar',
    props: { modelValue: String, userId: Number, src: String },
    setup(props) {
      const avatar = computed(() => {
        if (props.src) {
          return props.src
        }
        return require('@/assets/avatar.png')
      })
      // const router = useRouter()
      const route = useRoute()
      const toUserPage = function () {
        const i = route.fullPath
        const i1 = route.path
        console.log(i)
        console.log(i1)
      }
      return {
        avatar,
        toUserPage,
      }
    },
  }
</script>
<style lang="scss" scoped>
  .avatar-container {
    cursor: pointer;
    width: 100%;
    height: 100%;
    border-radius: 10px;
    object-fit: cover;
  }
</style>
